// list
let list1=document.querySelectorAll(".list1");
let white=document.querySelectorAll(".white");


for(let i=0;i<list1.length;i++){
    white[i].onmouseover=function(){
        for(let j=0;j<list1.length;j++){
            if(i==j){
               list1[i].style.display="block"; 
               list1[i].style.top=-i*83.5+"px";
            }
            else{
                list1[j].style.display="none"; 
            }
        } 
    }
    white[i].onmouseleave=function(){
        list1[i].style.display="none"; 
    }
}

//menu
let allL=document.querySelector(".all>span");
let all=document.querySelector(".all");
allL.onmouseover=function(){
    for(let j=0;j<white.length;j++){
        white[j].style.display="block"
    }
}
all.onmouseleave=function(){
    for(let j=0;j<white.length;j++){
        white[j].style.display="none"
    }
}

/* 渲染 */
class goodsList{
    constructor(ops){
        this.goodsList = ops.goodsList;
        this.url = ops.url;
        this.load();
    }
    load(){
        request({
            url:this.url,
            success:(res)=>{
                this.res=(JSON.parse(res).listL.img);
                this.render();
            }
        });
    }
    render(){
        let str = "";
            for(var i=0;i<this.res.length;i++){
                if(i<4){
                    str += `
                <div class="box" index="${this.res[i].proId}">
                <a href="./detail.html?id=${this.res[i].proId}">
                    <img src="${this.res[i].url[0].src}" alt="">
                    <p>${this.res[i].name}</p>
                    </a>
                    <i>￥</i>
                    <span>${this.res[i].price}</span>
                    <button class="add">加入购物车</button>
                </div>
                `    
                }else{
                    str += `
                <div class="box" index="${this.res[i].proId}">
                    <img src="${this.res[i].url[0].src}" alt="">
                    <p>${this.res[i].name}</p>
                    <i>￥</i>
                    <span>${this.res[i].price}</span>
                    <button class="add">加入购物车</button>
                </div>
                `    
                }
                
            } 
        this.goodsList.innerHTML = str;
    }
}

new goodsList({
    box:document.querySelectorAll(".goodsList>.box"),
    add:document.querySelector(".goodsList>.box>.add"),
    goodsList:document.querySelector(".goodsList"),
    url:"http://localhost:3001/json/listAll.json"
});